<template>
  <div class="webim-config">
    <el-form ref="webImForm" :model="webImForm" label-position="left"  label-width="120px">
      <div class="title">底部广告设置</div>
      <el-form-item label="广告滚动方向：">
        <el-radio-group v-model.trim="webImForm.advScroll">
          <el-radio label="scrollX">水平方向</el-radio>
          <el-radio label="scrollY">垂直方向</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="滚动间隔时间：">
        <el-input v-model.trim="webImForm.advScrollTime" type="number" min="0" max="10"  placeholder="请输入内容" @blur="blurMar" size="mini" class="width-440">
          <template slot="append">秒</template>
        </el-input>
        <div class="width-440 prompt" style="line-height: 14px">"0" 表示不展示广告，建议设置10秒内</div>
      </el-form-item>
      <el-form-item label="广告内容：" class="adv-content">
        <div class="width-440">
          <span class="prompt">已添加{{webImForm.advContent.length}}条广告:</span>
          <span style="float: right">
            <span class="btn-span" @click.stop="showAdvList">添加</span>
            <span class="btn-span btnDel" @click.stop="delAllAdv">删除所有</span>
          </span>
        </div>
        <div class="advertisingLi" v-if="webImForm.advContent.length">
          <div v-for="(item, index) in webImForm.advContent">
            <div class="adv-item-title float-l">{{index + 1}} : {{item.advTitle}}</div>
            <div>
              <el-switch
                v-model="item.enable"
                active-color="#459ae9"
                inactive-color="#ccc">
              </el-switch>
              <span class="btn-span" @click="editAdvItem(index)">编辑</span>
              <span class="btn-span btnDel" @click="delAdvItem(index)">删除</span>
            </div>
          </div>
        </div>
      </el-form-item>
      <div v-if="showAdvEdit">
        <el-form-item label="广告标题：">
          <el-input v-model.trim="addAdvObj.advTitle" placeholder="请输入内容" size="mini" class="width-440"></el-input>
        </el-form-item>
        <el-form-item label="广告链接：" class="width-440">
        <el-input v-model.trim="addAdvObj.advUrl" placeholder="请输入内容" size="mini" class="width-440"></el-input>
      </el-form-item>
        <el-form-item label="广告地区：">
          <div v-for="(item, index) in addAdvObj.advArea" class="adv-item">
            <area-linkage
              class="fl"
              style="width: 420px"
              :onlyProvinceAndCity="true"
              :provinceName="'province'"
              :provinceValue="item.province"
              :cityName="'city'"
              :cityValue="item.city"
              :advAreaObj="item"
              :currentIndex="index"
              @valueChange="handleAreaLinkageChange">
            </area-linkage>
            <span>
              <span v-if="index === 0" @click.stop="addAreaItem" class="color el-icon-plus"></span>
              <span class="el-icon-minus-del el-icon-minus" v-else @click.prevent="removeAreaItem(index)"></span>
            </span>
          </div>
          <div class="add_adv_btn width-440" style="text-align: right">
            <el-button size="mini" @click="cancelAdv">取消</el-button>
            <el-button v-show="isAddAdv" type="primary" size="mini" @click="addAdvItem">确认</el-button>
            <el-button v-show="!isAddAdv" type="primary" size="mini" @click="saveEditAdvItem">保存编辑</el-button>
          </div>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
  import {deepClone} from '@/utils/m7Utils'
  import AreaLinkage from '@/components/ui-modules/area-linkage/AreaLinkageAdv.vue'
  export default {
    name: 'baseConfig',
    data () {
      return {
        showAdvEdit: false, // 添加或者编辑广告
        isAddAdv: false, // 判定广告是添加还是编辑
        addAdvObj: {            //  添加广告地区初始值
          advTitle: '',
          advUrl: '',
          enable: true,
          advArea: [{
            province: '',
            city: ''
          }]
        },
        currentAdvIndex: 0,
        // sdk推送设置
        webImForm: {
          advContent: [],
          advScrollTime: 3,
          webImForm: '',
          advScroll: 'scrollX'
        }
      }
    },
    props: {
    },
    components: {
      AreaLinkage
    },
    computed: {
    },
    methods: {
      open (val, isAdd) {
        if (isAdd) {
          this.webImForm = {
            advContent: [],
            advScrollTime: 3,
            webImForm: '',
            advScroll: 'scrollX'
          }
        } else {
          if (val.advConfig) {
            for (let key in this.webImForm) {
              this.webImForm[key] = deepClone(val.advConfig[key])
            }
          }
        }
        this.$emit('advContent', this.webImForm)
      },
      // 保存编辑的广告
      saveEditAdvItem () {
        if (!this.addAdvObj.advUrl) {
          this.$message.error('请输入广告标题')
          return
        } else if (!this.addAdvObj.advTitle) {
          this.$message.error('请输入广告链接')
          return
        }
        let obj = this.webImForm.advContent[this.currentAdvIndex]
        for (let key in obj) {
          obj[key] = deepClone(this.addAdvObj[key]) ? deepClone(this.addAdvObj[key]) : ''
        }
        this.showAdvEdit = false
      },
      // 添加一则新广告
      addAdvItem () {
        if (!this.addAdvObj.advTitle) {
          this.$message.error('请输入广告标题')
          return
        } else if (!this.addAdvObj.advUrl) {
          this.$message.error('请输入广告链接')
          return
        }
        this.webImForm.advContent.push(deepClone(this.addAdvObj))
        this.showAdvEdit = false
      },
      // 删除广告区域
      removeAreaItem (index) {
        this.addAdvObj.advArea.splice(index, 1)
      },
      // 添加广告区域
      addAreaItem () {
        let areaObj = {province: '', city: ''}
        this.addAdvObj.advArea.push(areaObj)
      },
      // 省市下拉改变事件
      handleAreaLinkageChange (selectObj) {
        for (let key in selectObj) {
          this.addAdvObj.advArea[selectObj.currentIndex][key] = selectObj[key] ? selectObj[key] : ''
        }
      },
      // 删除所有广告
      delAdvItem (index) {
        if (this.webImForm.advContent.length) {
          this.webImForm.advContent.splice(index, 1)
          this.showAdvEdit = false
        }
      },
      editAdvItem (index) {
        this.isAddAdv = false
        this.currentAdvIndex = index
        let Obj = this.webImForm.advContent[index]
        for (let key in Obj) {
          this.addAdvObj[key] = deepClone(Obj[key])
        }
        this.showAdvEdit = true
      },
      // 取消添加广告
      cancelAdv () {
        this.showAdvEdit = false
      },
      // 删除所有的滚动广告
      delAllAdv () {
        this.showAdvEdit = false
        this.webImForm.advContent = []
      },
      // 添加广告
      showAdvList () {
        this.addAdvObj.advTitle = ''
        this.addAdvObj.advUrl = ''
        this.addAdvObj.enable = true
        this.addAdvObj.advArea = [{province: '', city: ''}]
        this.showAdvEdit = true
        this.isAddAdv = true
      },
      blurMar () {
        if (this.webImForm && ((this.webImForm.advScrollTime < 0 && this.webImForm.advScrollTime + '' !== '10') || this.webImForm.advScrollTime > 10)) {
          this.$message.error('滚动时间不能小于0或大于10秒')
          this.webImForm.advScrollTime = '3'
        }
      }
    },
    mounted () {
    }
  }
</script>
<style lang="stylus">
  .webim-config
    .el-form-item__content
      font-size 12px
</style>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .adv-item-title
    margin-right: 10px;
    width: 322px;
    line-height: 14px;
    word-break: break-word;
  .el-icon-plus
    background-color $c-main
    color #fff
    cursor pointer
    border-radius: 50%;
    padding: 3px;
  .el-icon-minus-del
    background-color $c-pink
    color #fff
    cursor pointer
    border-radius: 50%;
    padding: 3px;
  .adv-item
    position relative
  .btn-span
    color $c-main
    margin 0 5px
    cursor pointer
  .btnDel
    color $c-pink
  .float-l
    float left
  .title
    font-weight bold
  .margin-l-10
    margin-left 10px
  .width-440
    width 440px
  .prompt
    color $c-prompt
    line-height normal
    font-size 12px
</style>
